<template>
  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="user-info-card">
        <view class="avatar-section">
          <view
            v-if="!avatar"
            class="cu-avatar xl round bg-white"
            @click="handleToLogin"
          >
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image
            v-if="avatar"
            @click="handleToAvatar"
            :src="avatar"
            class="cu-avatar xl round"
            mode="widthFix"
          >
          </image>
        </view>
        <view class="user-details">
          <view v-if="!username" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-else class="user-info" @click="handleToInfo">
            <view class="username">{{ userInfo.nickname || username }}</view>
            <view v-if="userInfo.dept_name" class="dept"
              >部门：{{ userInfo.dept_name }}</view
            >
            <view
              v-else-if="userInfo.work_shift || userInfo.work_class"
              class="work-info"
            >
              {{ userInfo.work_shift }} {{ userInfo.work_class }}
            </view>
            <view v-if="userInfo.mobile" class="mobile"
              >手机：{{ userInfo.mobile }}</view
            >
          </view>
        </view>
        <view class="edit-info" @click="handleToInfo">
          <text>编辑资料</text>
          <view class="iconfont icon-right"></view>
        </view>
      </view>
    </view>

    <view class="content-section">
      <!-- 功能模块卡片 -->
      <view class="module-cards">
        <!-- 个人信息卡片 -->
        <view class="card-item" @click="handleToInfo">
          <view class="card-icon personal">
            <view class="iconfont icon-user"></view>
          </view>
          <view class="card-content">
            <view class="card-title">个人信息</view>
            <view class="card-desc">查看和编辑个人资料</view>
          </view>
          <view class="card-arrow">
            <view class="iconfont icon-right"></view>
          </view>
        </view>

        <!-- 修改密码卡片 -->
        <view class="card-item" @click="handleToChangePwd">
          <view class="card-icon password">
            <view class="iconfont icon-password"></view>
          </view>
          <view class="card-content">
            <view class="card-title">修改密码</view>
            <view class="card-desc">定期修改密码保障安全</view>
          </view>
          <view class="card-arrow">
            <view class="iconfont icon-right"></view>
          </view>
        </view>

        <!-- 版本更新卡片 -->
        <view class="card-item" @click="handleVersionUpdate">
          <view class="card-icon update">
            <view class="iconfont icon-version"></view>
          </view>
          <view class="card-content">
            <view class="card-title"
              >版本更新
              <text v-if="hasNewVersion" class="new-dot">●</text>
              <text v-if="hasDownloadedUpdate" class="download-dot">⬇</text>
            </view>
            <view class="card-desc">
              当前版本 <text class="version-name">{{ displayVersion }}</text>
            </view>
          </view>
          <view class="card-arrow">
            <view class="iconfont icon-right"></view>
          </view>
        </view>

        <!-- 清除缓存卡片 -->
        <view class="card-item" @click="handleClearCache">
          <view class="card-icon cache">
            <view class="iconfont icon-clean"></view>
          </view>
          <view class="card-content">
            <view class="card-title">清除缓存</view>
            <view class="card-desc">
              <text class="desc-text">释放存储空间</text>
              <text class="cache-size">{{ cacheSize }}MB</text>
            </view>
          </view>
          <view class="card-arrow">
            <view class="iconfont icon-right"></view>
          </view>
        </view>
      </view>

      <!-- 退出登录按钮 -->
      <view class="logout-section">
        <button class="logout-btn" @click="handleLogout">退出登录</button>
      </view>
    </view>
  </view>
</template>

<script>
import appUpdate from "@/utils/appUpdate";

export default {
  data() {
    return {
      name: "",
      userInfo: {
        nickname: "",
        mobile: "",
        work_shift: "",
        work_class: "",
        dept_name: "",
        process_name: "",
        prod_center: "",
        warehouse_name: "",
        avatar: "",
      },
      userStats: {
        todayTasks: 12,
        completedTasks: 156,
        points: 880,
      },
      currentVersion: 1, // 与 manifest.versionCode 同类型
      cacheSize: "0.0",
      loading: false,
      loadingText: "加载中...",
      showUpdateModal: false,
      newVersion: "",
      updateDescription: "",
      hasNewVersion: false, // 控制「有新版本」红点显示
      hasDownloadedUpdate: false, // 控制「已下载更新」状态显示
    };
  },
  computed: {
    avatar() {
      return this.$store.state.user.avatar || this.userInfo.avatar;
    },
    username() {
      return (
        this.$store.state.user.username || this.$store.state.user.nickname || ""
      );
    },
    // 工作信息计算属性
    workInfo() {
      return this.$store.state.user.workInfo || {};
    },
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50;
    },
    // 对外展示：版本名称（版本号：序号）
    displayVersion() {
      const manifest = require("@/manifest.json");
      const name = manifest.versionName || "1.0.0";
      const code = manifest.versionCode || 1;
      return `${name}（versionCode：${code}）`;
    },
  },
  onShow() {
    console.log("🔄 我的页面 onShow 触发");
    this.initializeUserData();
    this.getCurrentVersion();
    this.getCacheSize();

    // 移除自动版本检测功能，只在用户手动点击时触发
    // if (this.$store.state.user.token) {
    //   this.autoCheckVersion();
    // }

    // 监听工作信息更新事件
    uni.$on("workInfoUpdated", this.handleWorkInfoUpdate);
  },

  onLoad() {
    console.log("📱 我的页面 onLoad 触发");

    // 打印完整的Vuex用户数据用于调试
    console.log("📊 Vuex完整用户数据:", {
      user: this.$store.state.user,
      workInfo: this.$store.state.user.workInfo,
      userConfig: this.$store.state.user.userConfig,
      token: this.$store.state.user.token,
      id: this.$store.state.user.id,
    });
  },

  onReady() {
    console.log("✅ 我的页面 onReady 触发");
    console.log("👤 当前用户信息:", {
      username: this.username,
      userInfo: this.userInfo,
      avatar: this.avatar,
    });

    // 监听Vuex工作信息变化
    this.$watch(
      "$store.state.user.workInfo",
      (newWorkInfo) => {
        console.log("👂 检测到Vuex工作信息变化:", newWorkInfo);
        if (newWorkInfo && Object.keys(newWorkInfo).length > 0) {
          this.updateUserInfoFromWorkInfo(
            newWorkInfo,
            this.$store.state.user.userConfig || {}
          );
        }
      },
      { deep: true }
    );
  },

  onUnload() {
    // 清理定时器，防止内存泄漏
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer);
      this.refreshTimer = null;
    }

    // 清理事件监听
    uni.$off("userInfoUpdated");
    uni.$off("avatarUpdated");
    uni.$off("cacheCleared");
  },

  onHide() {
    // 页面隐藏时也清理定时器
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer);
      this.refreshTimer = null;
    }
  },
  methods: {
    // 统一初始化用户数据
    async initializeUserData() {
      try {
        const token = this.$store.state.user.token;
        const userId = this.$store.state.user.id;

        console.log("🔍 初始化用户数据检查:", { token: !!token, userId });

        if (!token || !userId) {
          console.warn("用户未登录，重置用户信息");
          this.resetUserInfo();
          return;
        }

        // 优先从Vuex获取已登录用户信息
        this.name =
          this.$store.state.user.username || this.$store.state.user.nickname;

        // 从Vuex获取工作信息并更新界面
        const workInfo = this.$store.state.user.workInfo || {};
        const userConfig = this.$store.state.user.userConfig || {};

        console.log("📋 Vuex工作信息:", workInfo);
        console.log("📋 Vuex用户配置:", userConfig);

        // 合并工作信息到用户信息
        this.updateUserInfoFromWorkInfo(workInfo, userConfig);
      } catch (error) {
        console.error("初始化用户数据失败:", error);
      }
    },

    // 重置用户信息
    resetUserInfo() {
      this.name = "";
      this.userInfo = {
        nickname: "",
        mobile: "",
        work_shift: "",
        work_class: "",
        dept_name: "",
        process_name: "",
        prod_center: "",
        warehouse_name: "",
        avatar: "",
      };
    },

    // 从工作信息更新用户信息
    updateUserInfoFromWorkInfo(workInfo, userConfig) {
      try {
        console.log("🔄 开始从工作信息更新用户信息");
        console.log("📋 workInfo数据:", workInfo);
        console.log("📋 userConfig数据:", userConfig);

        // 从工作信息中提取数据 - 支持多种数据格式
        const workShift =
          workInfo.workShift ||
          workInfo.work_shift ||
          userConfig.workShift ||
          userConfig.work_shift ||
          "";
        const workClass =
          workInfo.workClass ||
          workInfo.work_class ||
          userConfig.workClass ||
          userConfig.work_class ||
          "";

        // 部门信息 - 支持多种字段格式
        let deptName = "";
        if (workInfo.deptName || workInfo.dept_name) {
          deptName = workInfo.deptName || workInfo.dept_name;
        } else if (workInfo.dept) {
          deptName =
            workInfo.dept.deptName ||
            workInfo.dept.dept_name ||
            workInfo.dept.name ||
            "";
        } else if (userConfig.deptName || userConfig.dept_name) {
          deptName = userConfig.deptName || userConfig.dept_name;
        } else if (userConfig.dept) {
          deptName =
            userConfig.dept.deptName ||
            userConfig.dept.dept_name ||
            userConfig.dept.name ||
            "";
        }

        // 工序信息 - 支持多种字段格式
        let processName = "";
        if (workInfo.processName || workInfo.process_name) {
          processName = workInfo.processName || workInfo.process_name;
        } else if (workInfo.process) {
          processName =
            workInfo.process.processName ||
            workInfo.process.process_name ||
            workInfo.process.name ||
            "";
        } else if (userConfig.processName || userConfig.process_name) {
          processName = userConfig.processName || userConfig.process_name;
        } else if (userConfig.process) {
          processName =
            userConfig.process.processName ||
            userConfig.process.process_name ||
            userConfig.process.name ||
            "";
        }

        // 机组信息 - 支持多种字段格式
        let prodCenter = "";
        if (
          workInfo.prodCenterName ||
          workInfo.prod_center_name ||
          workInfo.prodCenter
        ) {
          prodCenter =
            workInfo.prodCenterName ||
            workInfo.prod_center_name ||
            workInfo.prodCenter;
        } else if (workInfo.prodLine || workInfo.prod_line) {
          prodCenter = workInfo.prodLine || workInfo.prod_line;
        } else if (userConfig.prodCenterName || userConfig.prod_center_name) {
          prodCenter = userConfig.prodCenterName || userConfig.prod_center_name;
        } else if (userConfig.prodLine || userConfig.prod_line) {
          prodCenter = userConfig.prodLine || userConfig.prod_line;
        }

        // 仓库信息 - 支持多种字段格式
        let warehouseName = "";
        if (workInfo.warehouseName || workInfo.warehouse_name) {
          warehouseName = workInfo.warehouseName || workInfo.warehouse_name;
        } else if (workInfo.warehouse) {
          warehouseName =
            workInfo.warehouse.warehouseName ||
            workInfo.warehouse.warehouse_name ||
            workInfo.warehouse.name ||
            "";
        } else if (userConfig.warehouseName || userConfig.warehouse_name) {
          warehouseName = userConfig.warehouseName || userConfig.warehouse_name;
        } else if (userConfig.warehouse) {
          warehouseName =
            userConfig.warehouse.warehouseName ||
            userConfig.warehouse.warehouse_name ||
            userConfig.warehouse.name ||
            "";
        }

        console.log("📊 提取的工作信息:", {
          workShift,
          workClass,
          deptName,
          processName,
          prodCenter,
          warehouseName,
        });

        // 更新用户信息
        this.userInfo.work_shift = workShift;
        this.userInfo.work_class = workClass;
        this.userInfo.dept_name = deptName;
        this.userInfo.process_name = processName;
        this.userInfo.prod_center = prodCenter;
        this.userInfo.warehouse_name = warehouseName;

        console.log("✅ 用户信息更新完成:", this.userInfo);
      } catch (error) {
        console.error("从工作信息更新用户信息失败:", error);
      }
    },

    // 处理工作信息更新事件
    handleWorkInfoUpdate(data) {
      console.log("📡 接收到工作信息更新事件:", data);
      const workInfo = data.workInfo || this.$store.state.user.workInfo || {};
      const userConfig =
        data.userConfig || this.$store.state.user.userConfig || {};
      this.updateUserInfoFromWorkInfo(workInfo, userConfig);
    },

    // 统一更新用户信息
    updateUserInfo(userData, isBasic = false) {
      // 格式化用户信息
      this.userInfo = {
        nickname:
          userData.nickName || userData.userName || userData.username || "",
        mobile: userData.phonenumber || userData.mobile || "",
        work_shift: userData.workShift || "",
        work_class: userData.workClass || "",
        dept_name: userData.dept?.deptName || userData.deptName || "",
        process_name:
          userData.process?.processName || userData.processName || "",
        prod_center:
          userData.prodCenter?.centerName || userData.prodCenterName || "",
        warehouse_name:
          userData.warehouse?.warehouseName || userData.warehouseName || "",
        avatar: userData.avatar || "",
      };

      // 更新Vuex状态
      const username = userData.userName || userData.username || "";
      const nickname = userData.nickName || userData.nickname || "";

      if (username) this.$store.commit("user/SET_USERNAME", username);
      if (nickname) this.$store.commit("user/SET_NICKNAME", nickname);
      if (userData.avatar)
        this.$store.commit("user/SET_AVATAR", userData.avatar);

      // 更新本地显示的名称
      this.name = nickname || username;

      // 缓存用户信息
      uni.setStorageSync("user_profile", this.userInfo);
    },

    // 获取当前版本（从 manifest.json 读取 versionCode）
    getCurrentVersion() {
      const manifest = require("@/manifest.json");
      this.currentVersion = manifest.versionCode || 1;
    },

    handleToInfo() {
      // 个人信息页面现在直接从Vuex state获取数据，无需参数传递
      console.log("📝 跳转到个人信息页面（直接从Vuex state获取数据）");

      uni.navigateTo({
        url: "/pages/mine/info/index",
      });
    },

    handleToChangePwd() {
      uni.navigateTo({
        url: "/pages/mine/pwd/index",
      });
    },

    handleToAvatar() {
      uni.navigateTo({
        url: "/pages/mine/avatar/index",
      });
    },

    handleAbout() {
      uni.navigateTo({
        url: "/pages/mine/about/index",
      });
    },

    // 系统更新功能增强（手动检测入口）
    async handleVersionUpdate() {
      // 使用新的版本更新服务（基于AppVersionApi.getAppVersionPage）
      try {
        console.log("手动触发版本更新检测");
        await appUpdate.checkAppUpdate({
          silent: false, // 手动检测，显示提示
          autoInstall: false, // 不自动安装，让用户选择
          onProgress: (progress) => {
            console.log(`版本更新进度: ${progress}%`);
          },
        });
      } catch (error) {
        console.error("版本检测失败:", error);
        uni.showModal({
          title: "检测失败",
          content: error.message || "网络异常，请稍后重试",
          showCancel: false,
        });
      }
    },

    // 登录后自动检测（静默）
    async autoCheckVersion() {
      // 使用新的版本更新服务（基于AppVersionApi.getAppVersionPage）
      try {
        await appUpdate.checkAppUpdate({
          silent: true, // 静默检测
          silentDownload: true, // 静默下载
          autoInstall: false, // 禁止自动安装，需要用户手动确认
          onComplete: (result) => {
            if (result.hasUpdate && !result.silentDownload) {
              // 非静默模式下发现新版本，显示红点提示
              this.hasNewVersion = true;
              console.log("发现新版本，已标记红点提示");
            } else if (result.hasUpdate && result.silentDownload) {
              // 静默模式下发现新版本，不显示红点
              console.log("发现新版本，已启动静默下载");
            }
            
            // 静默下载完成，显示简单的完成提示
              if (result.hasUpdate && result.silentDownload && result.downloadComplete) {
                // 处理用户选择结果
                if (result.userConfirmedInstall === true) {
                  // 用户选择立即安装
                  console.log("用户确认立即安装新版本");
                  this.installDownloadedUpdate(result.filePath);
                } else if (result.userConfirmedInstall === false) {
                  // 用户选择稍后安装
                  uni.showToast({
                    title: "已选择稍后安装，可在我的页面手动更新",
                    icon: "none",
                    duration: 3000
                  });
                  // 显示红点提示用户有已下载的更新等待安装
                  this.hasNewVersion = true;
                  this.hasDownloadedUpdate = true;
                  console.log("用户选择稍后安装，已标记红点提示");
                }
              }
          },
        });
      } catch (error) {
        // 静默检测失败不提示用户
        console.error("静默版本检测失败:", error);
      }
    },

    // 版本号比较工具函数（保留供其他功能使用）
    compareVersions(v1, v2) {
      return v1 - v2;
    },

    // 安装已下载的更新（静默下载完成后用户选择安装）
    installDownloadedUpdate(filePath) {
      this.$modal.loading("正在安装，请稍候...");

      try {
        // 检查plus是否可用
        if (typeof plus !== "undefined" && plus.runtime) {
          plus.runtime.install(
            filePath,
            {},
            () => {
              this.$modal.closeLoading();
              // 安装成功，询问是否重启应用
              this.$modal
                .alert({
                  title: "🎉 安装成功",
                  content: "新版本安装成功！是否立即重启应用以体验最新功能？",
                  confirmText: "🔄 立即重启",
                  cancelText: "⏰ 稍后重启",
                  showCancel: true,
                  confirmColor: "#10b981",
                  cancelColor: "#64748b",
                })
                .then((restartRes) => {
                  if (restartRes.confirm) {
                    // 重启应用
                    plus.runtime.restart();
                  } else {
                    this.$modal.showCustomToast(
                      "安装完成，请手动重启应用",
                      "info"
                    );
                  }
                });
            },
            (error) => {
              this.$modal.closeLoading();
              console.error("安装失败:", error);
              this.$modal.alert({
                title: "❌ 安装失败",
                content: `安装失败：${error.message}\n\n请检查文件完整性或重新下载`,
                confirmText: "我知道了",
                showCancel: false,
                confirmColor: "#ef4444",
              });
            }
          );
        } else {
          this.$modal.closeLoading();
          this.$modal.showCustomToast(
            "安装环境异常，请在正确的App环境中使用",
            "warning"
          );
        }
      } catch (error) {
        this.$modal.closeLoading();
        console.error("安装过程异常:", error);
        this.$modal.showCustomToast("安装异常，请重试", "error");
      }
    },

    // 工具：格式化文件大小（保留供其他功能使用）
    formatSize(byte) {
      if (!byte) return "0 B";
      const k = 1024;
      const sizes = ["B", "KB", "MB", "GB"];
      const i = Math.floor(Math.log(byte) / Math.log(k));
      return (byte / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
    },

    // 清除缓存功能
    handleClearCache() {
      uni.showModal({
        title: "清除缓存",
        content:
          "确定要清除应用缓存吗？此操作将清除本地存储的图片、文件等缓存数据。",
        showCancel: true,
        confirmText: "确定清除",
        cancelText: "取消",
        success: (res) => {
          if (res.confirm) {
            this.clearAppCache();
          }
        },
      });
    },

    // 清除应用缓存
    async clearAppCache() {
      uni.showLoading({
        title: "清理中...",
        mask: true,
      });

      try {
        // 清除本地存储
        const keys = uni.getStorageInfoSync().keys;
        const excludeKeys = ["userInfo", "token", "settings"]; // 排除重要数据

        keys.forEach((key) => {
          if (!excludeKeys.includes(key)) {
            uni.removeStorageSync(key);
          }
        });

        // 清除文件缓存
        if (uni.getFileSystemManager) {
          const fs = uni.getFileSystemManager();
          try {
            const tempFiles = fs.readdirSync(`${wx.env.USER_DATA_PATH}/temp`);
            tempFiles.forEach((file) => {
              fs.unlinkSync(`${wx.env.USER_DATA_PATH}/temp/${file}`);
            });
          } catch (e) {
            console.log("临时文件清理完成或不存在");
          }
        }

        uni.hideLoading();
        uni.showModal({
          title: "清理完成",
          content: "缓存清理成功！应用运行将更加流畅。",
          showCancel: false,
          confirmText: "确定",
        });

        // 更新缓存大小显示
        this.getCacheSize();
      } catch (error) {
        uni.hideLoading();
        uni.showModal({
          title: "清理失败",
          content: "缓存清理失败，请重试",
          showCancel: false,
          confirmText: "确定",
        });
      }
    },

    // 获取缓存大小
    async getCacheSize() {
      try {
        let totalSize = 0;

        // 计算本地存储大小
        const keys = uni.getStorageInfoSync().keys;
        keys.forEach((key) => {
          try {
            const value = uni.getStorageSync(key);
            totalSize += JSON.stringify(value).length;
          } catch (e) {
            console.log(`无法计算 ${key} 的大小`);
          }
        });

        // 计算文件缓存大小（模拟）
        totalSize += 2.5 * 1024 * 1024; // 模拟2.5MB文件缓存

        this.cacheSize = (totalSize / (1024 * 1024)).toFixed(1);
      } catch (error) {
        this.cacheSize = "0.0";
      }
    },

    // 检查登录状态（简化版，主要处理未登录情况）
    checkLoginStatus() {
      const token = this.$store.state.user.token;
      const userId = this.$store.state.user.id;

      if (!token || !userId) {
        console.log("用户未登录，清空用户信息");
        this.resetUserInfo();
      }
    },

    // 退出登录
    handleLogout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: async (res) => {
          if (res.confirm) {
            try {
              // 使用await处理store.dispatch返回值
              await this.$store.dispatch("user/LogOut");
              // 清理本地存储的用户信息
              uni.removeStorageSync("user_profile");
              // 跳转到登录页
              uni.reLaunch({
                url: "/pages/login",
              });
            } catch (error) {
              console.error("退出登录失败:", error);
              this.$modal.msgError("退出登录失败");
            }
          }
        },
      });
    },

    handleToLogin() {
      uni.reLaunch({
        url: "/pages/login",
      });
    },

    handleToEditInfo() {
      uni.navigateTo({
        url: "/pages/mine/info/edit",
      });
    },

    handleHelp() {
      uni.navigateTo({
        url: "/pages/mine/help/index",
      });
    },

    handleJiaoLiuQun() {
      this.$modal.showToast("QQ群：①133713780(满)、②146013835(满)、③189091635");
    },

    handleBuilding() {
      this.$modal.showToast("模块建设中~");
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f6f7;
}

.mine-container {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header-section {
  padding: 60rpx 40rpx 80rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;

  .user-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .avatar-section {
      .cu-avatar {
        border: 4rpx solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);

        .icon {
          font-size: 40px;
        }
      }
    }

    .user-details {
      flex: 1;
      margin-left: 30rpx;

      .login-tip {
        font-size: 36rpx;
        font-weight: 500;
      }

      .user-info {
        .username {
          font-size: 40rpx;
          font-weight: 600;
          margin-bottom: 8rpx;
        }

        .dept,
        .work-info {
          font-size: 28rpx;
          opacity: 0.9;
          margin-bottom: 4rpx;
          color: rgba(255, 255, 255, 0.95);
        }

        .mobile {
          font-size: 26rpx;
          opacity: 0.8;
          margin-bottom: 4rpx;
        }
      }
    }

    .edit-info {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      opacity: 0.9;

      .icon-right {
        margin-left: 8rpx;
        font-size: 24rpx;
      }
    }
  }
}

.content-section {
  margin-top: -40rpx;
  padding: 0 30rpx;

  .module-cards {
    .card-item {
      display: flex;
      align-items: center;
      background: white;
      border-radius: 20rpx;
      padding: 40rpx 30rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;

      &:active {
        transform: translateY(-2rpx);
        box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
      }

      .card-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 30rpx;

        .iconfont {
          font-size: 40rpx;
          color: white;
        }

        // 多巴胺色系
        &.personal {
          background: linear-gradient(135deg, #ff6b6b, #ff8e53);
          box-shadow: 0 4rpx 20rpx rgba(255, 107, 107, 0.3);

          .iconfont {
            font-size: 42rpx;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
          }
        }

        &.password {
          background: linear-gradient(135deg, #4ecdc4, #44a08d);
          box-shadow: 0 4rpx 20rpx rgba(78, 205, 196, 0.3);
          position: relative;
          overflow: hidden;

          &::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
              45deg,
              transparent 30%,
              rgba(255, 255, 255, 0.2) 50%,
              transparent 70%
            );
            animation: pulse 2s infinite;
          }

          .iconfont {
            font-size: 42rpx;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
            position: relative;
            z-index: 1;
          }
        }

        &.update {
          background: linear-gradient(135deg, #a8e6cf, #7fcdcd);
          box-shadow: 0 4rpx 20rpx rgba(168, 230, 207, 0.3);
          position: relative;
          overflow: hidden;

          &::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
              45deg,
              transparent 30%,
              rgba(255, 255, 255, 0.2) 50%,
              transparent 70%
            );
            animation: rotate 4s linear infinite;
          }

          .iconfont {
            font-size: 42rpx;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
            position: relative;
            z-index: 1;
          }
        }

        &.cache {
          background: linear-gradient(135deg, #ff6b35, #f7931e, #ffd23f);
          box-shadow: 0 4rpx 20rpx rgba(255, 107, 53, 0.4);
          position: relative;
          overflow: hidden;

          &::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
              45deg,
              transparent 30%,
              rgba(255, 255, 255, 0.3) 50%,
              transparent 70%
            );
            animation: shine 3s infinite;
          }

          .iconfont {
            font-size: 42rpx;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
            position: relative;
            z-index: 1;
          }
        }
      }

      .card-content {
        flex: 1;

        .card-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
        }

        .card-desc {
          font-size: 26rpx;
          color: #999;
          display: flex;
          align-items: center;

          .desc-text {
            margin-right: 20rpx;
          }

          .cache-size {
            font-size: 24rpx;
            color: #ff6b6b;
            font-weight: 600;
          }

          .version-name {
            color: #666; // 比默认再深一点，突出但不抢眼
            font-weight: 500;
          }
        }
      }

      .card-arrow {
        .icon-right {
          font-size: 28rpx;
          color: #ccc;
        }
      }
    }
  }

  .logout-section {
    margin-top: 60rpx;
    margin-bottom: 40rpx;

    .logout-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: linear-gradient(135deg, #ff6b6b, #ff8e53);
      color: white;
      border-radius: 44rpx;
      border: none;
      font-size: 32rpx;
      font-weight: 500;
      box-shadow: 0 4rpx 20rpx rgba(255, 107, 107, 0.3);

      &:active {
        opacity: 0.9;
        transform: scale(0.98);
      }
    }
  }
}

.cache-size {
  font-size: 24rpx;
  color: #ff6b6b;
  font-weight: 600;
  margin-left: 20rpx;
}

/* 新版本红点 */
.new-dot {
  color: #ff4757;
  font-size: 12px;
  margin-left: 4px;
  vertical-align: super;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

@keyframes pulse {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
    opacity: 0;
  }
}

@keyframes rotate {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}
</style>
